<template>
  <div class="course-learn-container">
    <FrontendHeader />
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 视频和章节区域 -->
      <div class="video-chapter-wrapper">
        <!-- 视频播放区域 -->
        <div class="video-section">
          <div class="video-container">
            <div class="video-player-wrapper">
              <!-- 视频播放器 -->
              <video ref="videoPlayer" :src="currentSection.videoUrl" controls class="video-player" @play="onVideoPlay" @pause="onVideoPause" @ended="onVideoEnded" @timeupdate="onTimeUpdate" @waiting="onVideoWaiting" @canplay="onVideoCanPlay">您的浏览器不支持视频播放</video>
              <!-- 视频加载中指示器 -->
              <div v-if="videoLoading" class="video-loading">
                <el-icon class="loading-icon"><Loading /></el-icon>
                <span>视频加载中...</span>
              </div>
            </div>
            <!-- 播放进度提示 -->
            <div class="video-progress-info">
              <span>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
              <el-progress :percentage="progressPercentage" :stroke-width="2" class="progress-bar" />
            </div>
          </div>
          <div class="section-info">
            <h2>{{ currentSection.name }}</h2>
            <div class="section-actions">
              <el-button type="primary" @click="handlePrevious" :disabled="!hasPrevious"><el-icon><ArrowLeft /></el-icon> 上一节</el-button>
              <el-button type="primary" @click="handleNext" :disabled="!hasNext">下一节 <el-icon><ArrowRight /></el-icon></el-button>
              <el-button @click="handleRate" v-if="!isRated"><el-icon><Star /></el-icon> 评分</el-button>
              <el-button @click="handleNote"><el-icon><EditPen /></el-icon> 记笔记</el-button>
            </div>
          </div>
        </div>
        
        <!-- 章节列表 - 简化版 -->
        <div class="chapters-section">
          <h3>课程章节</h3>
          <el-collapse v-model="activeChapters">
            <el-collapse-item :title="chapter.name" :name="chapter.id" v-for="chapter in chapters" :key="chapter.id">
              <div class="chapter-sections">
                <div 
                  class="section-item" 
                  v-for="section in chapter.sections" 
                  :key="section.id"
                  :class="{ 'active': currentSection.id === section.id, 'completed': isCompleted(section.id) }"
                  @click="switchSection(section)"
                >
                  <div class="section-info-item">
                    <el-icon class="section-icon"><VideoPlay /></el-icon>
                    <span class="section-title">{{ section.name }}</span>
                    <span class="section-duration" v-if="section.duration">{{ section.duration }}</span>
                  </div>
                  <el-icon v-if="isCompleted(section.id)" class="status-icon completed"><Check /></el-icon>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      
      <!-- 笔记和讨论区域 - 移到主内容下方 -->
      <div class="notes-discussion-section">
        <el-tabs v-model="activeTab">
          <!-- 视频控制设置 -->
          <el-tab-pane label="播放设置" name="settings">
            <div class="settings-content">
              <div class="control-group">
                <span>播放速度：</span>
                <el-radio-group v-model="playbackRate" @change="setPlaybackRate" class="playback-rate-group">
                  <el-radio :label="0.5">0.5x</el-radio>
                  <el-radio :label="1">1x</el-radio>
                  <el-radio :label="1.5">1.5x</el-radio>
                  <el-radio :label="2">2x</el-radio>
                </el-radio-group>
              </div>
              <div class="control-group">
                <span>音量：</span>
                <el-slider v-model="volume" @change="setVolume" :min="0" :max="1" :step="0.01" />
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 笔记标签页 -->
          <el-tab-pane label="我的笔记" name="notes">
            <div class="notes-header">
              <h3>本节笔记</h3>
              <el-button type="primary" @click="handleNote"><el-icon><EditPen /></el-icon> 添加笔记</el-button>
            </div>
            <div class="notes-content">
              <div class="notes-list" v-if="currentSectionNotes.length > 0">
                <div class="note-item" v-for="note in currentSectionNotes" :key="note.id">
                  <div class="note-header">
                    <div class="note-time">{{ formatDateTime(note.createTime) }}</div>
                    <div class="note-actions">
                      <el-button type="text" @click="editNote(note)"><el-icon><Edit /></el-icon> 编辑</el-button>
                      <el-button type="text" @click="deleteNote(note.id)"><el-icon><Delete /></el-icon> 删除</el-button>
                    </div>
                  </div>
                  <div class="note-content">{{ note.content }}</div>
                </div>
              </div>
              <div class="empty-notes" v-else>
                <p>暂无笔记，点击"添加笔记"记录学习心得</p>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 讨论标签页 -->
          <el-tab-pane label="课程讨论" name="discussions">
            <div class="discussion-header">
              <h3>课程讨论区</h3>
              <el-button type="primary" @click="handleAddDiscussion"><el-icon><ChatLineSquare /></el-icon> 发表讨论</el-button>
            </div>
            <div class="discussion-content">
              <div class="discussions-list" v-if="discussions.length > 0">
                <div class="discussion-item" v-for="discussion in discussions" :key="discussion.id">
                  <div class="discussion-header-info">
                    <div class="user-info">
                      <img :src="discussion.userAvatar" :alt="discussion.userName" class="user-avatar">
                      <div>
                        <div class="user-name">{{ discussion.userName }}</div>
                        <div class="discussion-time">{{ formatDateTime(discussion.createTime) }}</div>
                      </div>
                    </div>
                    <div class="discussion-section">{{ getSectionName(discussion.sectionId) }}</div>
                  </div>
                  <div class="discussion-content-text">{{ discussion.content }}</div>
                  <div class="discussion-actions">
                    <el-button type="text" @click="handleLike(discussion)"><el-icon><Like /></el-icon> {{ discussion.likes }} 赞</el-button>
                    <el-button type="text" @click="handleReply(discussion)"><el-icon><Message /></el-icon> 回复</el-button>
                  </div>
                  <div class="replies" v-if="discussion.replies && discussion.replies.length > 0">
                    <div class="reply-item" v-for="reply in discussion.replies" :key="reply.id">
                      <div class="reply-header">
                        <span class="reply-user">{{ reply.userName }}</span>
                        <span class="reply-time">{{ formatDateTime(reply.createTime) }}</span>
                      </div>
                      <div class="reply-content">{{ reply.content }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="empty-discussions" v-else>
                <p>暂无讨论，来发表第一条讨论吧</p>
              </div>
              <div class="pagination">
                <el-pagination
                  v-model:current-page="discussionPagination.currentPage"
                  v-model:page-size="discussionPagination.pageSize"
                  layout="prev, pager, next"
                  :total="discussionPagination.total"
                  @current-change="handleDiscussionPageChange"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 添加页脚组件 -->
    <FrontendFooter />
  </div>
    
    <!-- 笔记对话框 -->
    <el-dialog v-model="noteDialogVisible" title="课程笔记" width="600px">
      <el-form :model="noteForm" :rules="noteRules" ref="noteFormRef">
        <el-form-item prop="content">
          <el-input v-model="noteForm.content" type="textarea" :rows="8" placeholder="请输入笔记内容"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="noteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveNote">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 评分对话框 -->
    <el-dialog v-model="rateDialogVisible" title="课程评分" width="400px">
      <div class="rate-content">
        <div class="rate-stars">
          <el-rate v-model="rateValue" show-score />
        </div>
        <el-form :model="rateForm" :rules="rateRules" ref="rateFormRef">
          <el-form-item prop="comment">
            <el-input v-model="rateForm.comment" type="textarea" :rows="4" placeholder="请输入评价内容"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitRate">提交</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import FrontendHeader from '../../components/FrontendHeader.vue'
import FrontendFooter from '../../components/FrontendFooter.vue'
import { VideoPlay, Document, Check, ArrowLeft, ArrowRight, Star, EditPen, Edit, Delete, ChatLineSquare, Star as Like, Message, Loading } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElButton, ElTabs, ElTabPane, ElDialog, ElForm, ElFormItem, ElInput, ElProgress, ElCollapse, ElCollapseItem, ElPagination } from 'element-plus'
import {coursesById} from "@/api/Course.js";
import {querySectionsById} from "@/api/Sections.js";

const route = useRoute()
//接收路由路径中的两个参数
//课程id
const courseId = route.params.id
//小节id
const sectionId = route.query.sectionId

// 视频播放器引用
const videoPlayer = ref(null)

// 章节数据
const chapters = ref([])
const activeChapters = ref(['1'])

// 当前选中的小节
const currentSection = ref({})

// 完成的小节
const completedSections = ref([])

// 视频播放状态
const videoLoading = ref(false)
const isPlaying = ref(false)
const currentTime = ref(0)

// 处理记笔记按钮
const handleNote = () => {
  openNoteDialog()
}
const duration = ref(0)
const progressPercentage = ref(0)
const playbackRate = ref(1)
const volume = ref(1)

// 是否已评分
const isRated = ref(false)

// 标签页
const activeTab = ref('notes')

// 笔记相关
const currentSectionNotes = ref([
  {
    id: 1,
    content: '这是一个示例笔记，记录课程中的重要知识点。',
    createTime: new Date().toISOString()
  }
])
const noteDialogVisible = ref(false)
const editingNoteId = ref(null)
const noteForm = reactive({
  content: ''
})
const noteRules = {
  content: [
    { required: true, message: '请输入笔记内容', trigger: 'blur' }
  ]
}
const noteFormRef = ref(null)

// 评分相关
const rateDialogVisible = ref(false)
const rateValue = ref(5)
const rateForm = reactive({
  comment: ''
})
const rateRules = {
  comment: [
    { required: true, message: '请输入评价内容', trigger: 'blur' }
  ]
}
const rateFormRef = ref(null)

// 讨论相关
const discussions = ref([
  {
    id: 1,
    userName: '示例用户',
    userAvatar: 'https://placehold.co/40x40',
    content: '这个课程内容很丰富，讲解也很清晰！',
    likes: 15,
    createTime: new Date(Date.now() - 86400000).toISOString(), // 1天前
    sectionId: '1',
    replies: [
      {
        id: 101,
        userName: '回复用户',
        content: '同意，老师讲解很到位',
        createTime: new Date(Date.now() - 43200000).toISOString() // 12小时前
      }
    ]
  }
])
const discussionPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 1
})

// 计算属性
const hasPrevious = computed(() => {
  // 找到当前小节在所有小节中的索引
  let allSections = []
  chapters.value.forEach(chapter => {
    allSections = [...allSections, ...chapter.sections]
  })
  const currentIndex = allSections.findIndex(s => s.id === currentSection.value.id)
  return currentIndex > 0
})

const hasNext = computed(() => {
  // 找到当前小节在所有小节中的索引
  let allSections = []
  chapters.value.forEach(chapter => {
    allSections = [...allSections, ...chapter.sections]
  })
  const currentIndex = allSections.findIndex(s => s.id === currentSection.value.id)
  return currentIndex < allSections.length - 1
})

// 加载课程数据
const loadCourseData = () => {
  //根据id查询课程详情
  coursesById(courseId).then(res=>{
    chapters.value = res.data.chaptersList
  })
  // 初始化当前小节
  // let targetSection = null
  console.log(sectionId)
  //根据id查询小节信息
  querySectionsById(sectionId).then(res=>{
    currentSection.value = res.data
  })
  if (sectionId) {
    console.log("获取对应的小节")
    //根据小节的id查询小节信息
    // 根据URL参数设置当前小节
    chapters.value.forEach(chapter => {
      const section = chapter.sections.find(s => s.id == sectionId)
      console.log(section)
      if (section) {
        // targetSection = section
        activeChapters.value = [chapter.id]
        currentSection.value=section
        console.log("当前小节："+currentSection.value)
      }
    })
  }
  
  // 如果没有找到或没有指定，使用第一个小节
  // if (!targetSection) {
  //   targetSection = chapters.value[0]?.sections[0]
  //   console.log(targetSection)
  // }
  //
  // currentSection.value = targetSection
  
  // 加载模拟的完成状态
  completedSections.value = [101]
  
  // 加载模拟的笔记数据
  currentSectionNotes.value = [
    {
      id: 1,
      content: 'Vue3的环境搭建需要Node.js和npm，使用Vite可以快速创建项目。',
      createTime: new Date().toISOString()
    }
  ]
  
  // 加载模拟的讨论数据
  discussions.value = [
    {
      id: 1,
      userName: '张三',
      userAvatar: 'https://picsum.photos/32/32?random=10',
      content: '老师讲得很清晰，这个部分很容易理解。',
      sectionId: 101,
      likes: 5,
      createTime: new Date(Date.now() - 3600000).toISOString(),
      replies: [
        {
          id: 101,
          userName: '李四',
          content: '是的，我也觉得讲得很好',
          createTime: new Date(Date.now() - 1800000).toISOString()
        }
      ]
    }
  ]
  
  discussionPagination.total = discussions.value.length
}

// 检查小节是否已完成
const isCompleted = (sectionId) => {
  return completedSections.value.includes(sectionId)
}

// 切换小节
const switchSection = (section) => {
  currentSection.value = section
  // 这里应该记录学习进度
  loadSectionNotes(section.id)
}

// 上一节
const handlePrevious = () => {
  if (!hasPrevious.value) return
  
  let allSections = []
  chapters.value.forEach(chapter => {
    allSections = [...allSections, ...chapter.sections]
  })
  const currentIndex = allSections.findIndex(s => s.id === currentSection.value.id)
  switchSection(allSections[currentIndex - 1])
}

// 下一节
const handleNext = () => {
  if (!hasNext.value) return
  
  let allSections = []
  chapters.value.forEach(chapter => {
    allSections = [...allSections, ...chapter.sections]
  })
  const currentIndex = allSections.findIndex(s => s.id === currentSection.value.id)
  switchSection(allSections[currentIndex + 1])
}

// 加载小节笔记
const loadSectionNotes = (sectionId) => {
  // 这里应该调用API获取该小节的笔记
  // 暂时使用模拟数据
  if (sectionId === 101) {
    currentSectionNotes.value = [
      {
        id: 1,
        content: 'Vue3的环境搭建需要Node.js和npm，使用Vite可以快速创建项目。',
        createTime: new Date().toISOString()
      }
    ]
  } else {
    currentSectionNotes.value = []
  }
}

// 打开笔记对话框
const openNoteDialog = () => {
  editingNoteId.value = null
  noteForm.content = ''
  noteDialogVisible.value = true
}

// 编辑笔记
const editNote = (note) => {
  editingNoteId.value = note.id
  noteForm.content = note.content
  noteDialogVisible.value = true
}

// 保存笔记
const saveNote = async () => {
  try {
    await noteFormRef.value.validate()
    
    if (editingNoteId.value) {
      // 编辑笔记
      const index = currentSectionNotes.value.findIndex(n => n.id === editingNoteId.value)
      if (index !== -1) {
        currentSectionNotes.value[index].content = noteForm.content
      }
      ElMessage.success('笔记更新成功')
    } else {
      // 新增笔记
      const newNote = {
        id: Date.now(),
        content: noteForm.content,
        createTime: new Date().toISOString()
      }
      currentSectionNotes.value.push(newNote)
      ElMessage.success('笔记保存成功')
    }
    
    noteDialogVisible.value = false
  } catch (error) {
    console.error('笔记验证失败:', error)
  }
}

// 删除笔记
const deleteNote = (noteId) => {
  const index = currentSectionNotes.value.findIndex(n => n.id === noteId)
  if (index !== -1) {
    currentSectionNotes.value.splice(index, 1)
    ElMessage.success('笔记删除成功')
  }
}

// 打开评分对话框
const handleRate = () => {
  rateDialogVisible.value = true
}

// 提交评分
const submitRate = async () => {
  try {
    await rateFormRef.value.validate()
    
    // 这里应该调用API提交评分
    isRated.value = true
    ElMessage.success('评分成功')
    rateDialogVisible.value = false
  } catch (error) {
    console.error('评分验证失败:', error)
  }
}

// 处理点赞
const handleLike = (discussion) => {
  discussion.likes++
  ElMessage.success('点赞成功')
}

// 处理回复
const handleReply = (discussion) => {
  ElMessageBox.prompt('请输入回复内容', '发表回复', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'textarea'
  }).then(({ value }) => {
    // 这里应该调用API提交回复
    ElMessage.success('回复成功')
  }).catch(() => {
    // 取消回复
  })
}

// 打开讨论对话框
const openDiscussionDialog = () => {
  ElMessageBox.prompt('请输入讨论内容', '发表讨论', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'textarea'
  }).then(({ value }) => {
    // 这里应该调用API提交讨论
    ElMessage.success('讨论发表成功')
  }).catch(() => {
    // 取消发表
  })
}

// 讨论分页切换
const handleDiscussionPageChange = (current) => {
  discussionPagination.currentPage = current
  // 这里应该加载对应页的讨论数据
}

// 获取小节名称
const getSectionName = (sectionId) => {
  for (const chapter of chapters.value) {
    const section = chapter.sections.find(s => s.id === sectionId)
    if (section) {
      return section.name
    }
  }
  return '未知章节'
}

// 视频事件处理
const onVideoPlay = () => {
  isPlaying.value = true
  videoLoading.value = false
  // 可以在这里添加播放统计
}

const onVideoPause = () => {
  isPlaying.value = false
}

// 视频等待加载
const onVideoWaiting = () => {
  videoLoading.value = true
}

// 视频可播放
const onVideoCanPlay = () => {
  videoLoading.value = false
}

// 视频播放结束
const onVideoEnded = () => {
  isPlaying.value = false
  // 标记小节完成
  markSectionComplete(currentSection.value.id)
  
  // 如果有下一节，可以自动播放
  if (hasNext.value) {
    // 不自动播放，只显示提示
    ElMessage.info('本节已学习完成，您可以继续学习下一节')
  } else {
    ElMessage.success('恭喜您完成本课程所有内容的学习！')
  }
}

const onTimeUpdate = () => {
  if (!videoPlayer.value) return
  
  currentTime.value = videoPlayer.value.currentTime
  duration.value = videoPlayer.value.duration || 0
  progressPercentage.value = duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0
  
  // 自动保存播放进度（每5秒）
  if (Math.floor(currentTime.value) % 5 === 0) {
    savePlaybackProgress()
  }
}

// 格式化时间(秒转时分秒)
const formatTime = (seconds) => {
  if (!seconds || isNaN(seconds)) return '00:00'
  
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = Math.floor(seconds % 60)
  
  if (hours > 0) {
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
  return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

// 格式化日期时间
const formatDateTime = (timeStr) => {
  const date = new Date(timeStr)
  return date.toLocaleString('zh-CN')
}

// 标记小节完成
const markSectionComplete = (sectionId) => {
  if (!completedSections.value.includes(sectionId)) {
    completedSections.value.push(sectionId)
    // 可以在这里保存到后端
    localStorage.setItem(`completed_${courseId}_${sectionId}`, 'true')
    ElMessage.success('恭喜您完成本节学习！')
  }
}

// 保存播放进度
const savePlaybackProgress = () => {
  if (!currentSection.value.id) return
  localStorage.setItem(`progress_${courseId}_${currentSection.value.id}`, currentTime.value.toString())
}

// 加载播放进度
const loadPlaybackProgress = (sectionId) => {
  const savedProgress = localStorage.getItem(`progress_${courseId}_${sectionId}`)
  if (savedProgress && videoPlayer.value) {
    videoPlayer.value.currentTime = parseFloat(savedProgress)
  }
}

// 设置播放速度
const setPlaybackRate = (rate) => {
  playbackRate.value = rate
  if (videoPlayer.value) {
    videoPlayer.value.playbackRate = rate
  }
}

// 设置音量
const setVolume = (value) => {
  volume.value = value
  if (videoPlayer.value) {
    videoPlayer.value.volume = value
  }
}

// 页面加载时获取数据
onMounted(() => {
  loadCourseData()
})

// 监听currentSection变化，自动展开对应的章节
watch(currentSection, (newSection) => {
  if (newSection) {
    chapters.value.forEach(chapter => {
      if (chapter.sections.some(s => s.id === newSection.id)) {
        activeChapters.value = [chapter.id]
      }
    })
  }
})
</script>

<style scoped>
/* 容器样式 */
.course-learn-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  position: relative;
  /* 确保容器可以滚动 */
  overflow-x: hidden;
  padding-bottom: 200px; /* 为页脚预留空间 */
}

/* 主内容区域 */
.main-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  /* 确保主内容有足够的最小高度 */
  min-height: calc(100vh - 100px);
}

/* 笔记和讨论区域样式 */
.notes-discussion-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 0;
  margin-top: 0;
  margin-bottom: 100px; /* 增加底部间距 */
  z-index: 5;
  position: relative;
  width: 100%;
  overflow: visible;
}

/* 关键修复：使用绝对定位页脚 */
:deep(.footer-container) {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #0e1a35;
  color: white;
  padding: 30px 0;
  z-index: 100; /* 确保页脚在最上层 */
}

/* 确保笔记内容有足够的底部空间 */
.notes-content,
.discussion-content {
  padding: 0 20px 80px; /* 大幅增加底部内边距 */
  min-height: 100px;
  position: relative;
  z-index: 1;
}

.video-container {
  position: relative;
  background-color: #000;
}

.video-player-wrapper {
  position: relative;
  width: 100%;
  min-height: 400px; /* 确保有足够高度 */
  background-color: #000;
}

.video-player {
  width: 100%;
  height: 100%;
  min-height: 400px; /* 确保有足够高度 */
  object-fit: contain; /* 保持视频比例 */
  z-index: 10;
}

.video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 8px;
  z-index: 20;
}

.loading-icon {
  font-size: 32px;
  margin-bottom: 10px;
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 移除绝对定位的进度信息，避免与视频控件重叠 */
.video-progress-info {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.05);
  color: #333;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.progress-bar {
  margin-top: 5px;
}

/* 章节信息和操作按钮 */
.section-info {
  padding: 20px;
}

.section-info h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #303133;
}

.section-actions {
  display: flex;
  gap: 10px;
  z-index: 100; /* 确保按钮在最上层 */
  position: relative;
}

/* 章节列表样式 */
.chapters-section {
  width: 320px;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: fit-content;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  position: sticky;
  top: 20px;
  flex-shrink: 0;
  z-index: 10;
  /* 移除所有内部额外内容 */
}

/* 隐藏侧边栏中的视频控制和笔记讨论 */
.video-controls,
.course-supplements {
  display: none !important;
}

.chapters-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #303133;
}

.chapter-sections {
  padding: 10px 0;
}

/* 小节项样式 */
.section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 5px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 100;
  position: relative;
}

.section-item:hover {
  background-color: #f5f7fa;
}

.section-item.active {
  background-color: #ecf5ff;
  border-left: 3px solid #409eff;
  color: #1890ff;
}

.section-item.completed .section-title {
  color: #67c23a;
}

.section-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* 修复模板中的类名问题 */
.section-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.section-icon {
  color: #667eea;
}

.section-title {
  flex: 1;
  font-size: 14px;
  color: #303133;
}

.section-duration {
  color: #909399;
  font-size: 12px;
}

.status-icon {
  font-size: 16px;
}

.status-icon.completed {
  color: #67c23a;
}

.status-icon.playing {
  color: #1890ff;
}

/* 笔记和讨论区域样式 */
.notes-discussion-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 0;
  margin-top: 0;
  margin-bottom: 150px; /* 进一步增加底部间距 */
  z-index: 5;
  position: relative;
  width: 100%;
  overflow: visible;
}

/* 标签页内容样式 */
.el-tabs__content {
  padding: 0;
}

/* 设置内容样式 */
.settings-content {
  padding: 20px;
}

.playback-rate-group {
  display: flex;
  gap: 10px;
}

.notes-content {
  padding: 0 20px 20px;
}

.discussion-content {
  padding: 0 20px 20px;
}

.notes-header,
.discussion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 0;
  margin-bottom: 15px;
}

.notes-header h3,
.discussion-header h3 {
  margin: 0;
  color: #303133;
}

/* 讨论头部信息 */
.discussion-header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

/* 笔记样式 */
.note-item {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.note-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-time {
  color: #909399;
  font-size: 12px;
}

.note-content {
  line-height: 1.6;
  color: #606266;
}

.empty-notes {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

/* 讨论样式 */
.discussion-item {
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.discussion-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-name {
  font-weight: bold;
  color: #303133;
}

.discussion-time {
  color: #909399;
  font-size: 12px;
}

.discussion-section {
  background-color: #f5f7fa;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
}

.discussion-content-text {
  line-height: 1.6;
  color: #606266;
  margin: 15px 0;
}

.discussion-actions {
  display: flex;
  gap: 20px;
}

/* 回复样式 */
.replies {
  margin-top: 15px;
  padding-left: 20px;
  border-left: 3px solid #ebeef5;
}

.reply-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.reply-user {
  font-weight: bold;
  color: #303133;
  font-size: 14px;
}

.reply-time {
  color: #909399;
  font-size: 12px;
}

.reply-content {
  color: #606266;
  font-size: 14px;
}

/* 分页样式 */
.pagination {
  margin-top: 30px;
  text-align: center;
}

/* 评分样式 */
.rate-content {
  padding: 20px 0;
}

.rate-stars {
  text-align: center;
  margin-bottom: 30px;
}

/* 视频和章节区域包装器 - 关键修改：添加flex布局 */
.video-chapter-wrapper {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  width: 100%;
}

/* 视频播放区域 - 调整宽度 */
.video-section {
  flex: 1;
  min-width: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .main-content {
    padding: 0 10px;
  }
  
  .video-chapter-wrapper {
    flex-direction: column;
  }
  
  .chapters-section {
    width: 100%;
    max-height: 300px;
    position: relative;
    top: 0;
  }
  
  .section-actions {
    flex-wrap: wrap;
  }
  
  .video-player-wrapper {
    min-height: 250px;
  }
  
  .video-player {
    min-height: 250px;
  }
  
  .notes-header,
  .discussion-header,
  .discussion-header-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .section-title {
    font-size: 12px;
  }
  
  .video-progress-info {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    padding: 10px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .chapters-section {
    width: 280px;
  }
  
  .section-title {
    font-size: 12px;
  }
}

/* 确保所有交互元素可以正常点击 */
.el-button,
.el-tabs__item,
.el-pagination__item,
.section-item {
  position: relative;
  z-index: 100;
  pointer-events: auto;
}

/* 修复一些可能的遮挡问题 */
.el-tabs__nav-wrap {
  position: relative;
  z-index: 100;
}

.el-tabs__content {
  position: relative;
  z-index: 50;
}

/* 控制组样式 */
.control-group {
  margin-bottom: 20px;
}

.control-group span {
  display: inline-block;
  width: 80px;
  font-weight: 500;
  color: #303133;
}
</style>